<template>
	<view class="big">
		<!-- 点击文字 -->
		<view class="">

		</view>
		<!-- 轮播图片 -->
		<view class="lunbo">
			<swiper indicator-dots circular autoplay interval="3000">
				<!-- 轮播的每一项 -->
				<swiper-item>
					<image
						src="http://img11.360buyimg.com/n1/jfs/t1/146404/35/20798/287818/6194c77dE46c38f05/079615af08a7126f.jpg"
						mode="">
					</image>
				</swiper-item>
				<swiper-item>
					<image
						src="http://img11.360buyimg.com/n1/s800x800_jfs/t1/143981/34/22024/502291/6194c786Eef7ea4a7/ca86b2d58b3a94c6.jpg"
						mode="">
					</image>
				</swiper-item>
				<swiper-item>
					<image
						src="http://img11.360buyimg.com/n1/s800x800_jfs/t1/163354/1/26980/159157/6194c7afEa1e448de/d54337f821efaa13.jpg"
						mode="">
					</image>
				</swiper-item>
				<swiper-item>
					<image
						src="http://img11.360buyimg.com/n1/s800x800_jfs/t1/113705/37/20223/179940/6194c7b6Ea435b103/650c2593cb139e63.jpg"
						mode="">
					</image>
				</swiper-item>
				<swiper-item>
					<image
						src="http://img11.360buyimg.com/n1/s800x800_jfs/t1/222922/14/2928/478758/6194c7bdE3746c9d7/549408e4d9e23181.jpg"
						mode="">
					</image>
				</swiper-item>

				<uni-section title="查看更多"
					subTitle="使用 show-get-more 显示更多,此时 single 属性将失效,始终单行显示,如不配置 more-text 属性 ,将显示箭头图标" type="line">
					<uni-notice-bar show-get-more show-icon text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！"
						@getmore="getMore" />
					<uni-notice-bar show-get-more show-icon more-text="查看更多"
						text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！" @getmore="getMore" />
				</uni-section>
			</swiper>
		</view>
		<!-- 价格/文字 -->
		<view class="RMB_text">
			<view class="RMB_text_text">
				5170
			</view>
			<view class="text_span">
				<uni-badge text="京东自营"></uni-badge>
				<text>老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包</text>
			</view>
		</view>
		<!-- 商品列表文字 -->
		<view class="texts">
			<view></view>
			<text>
				<text></text>
				详情介绍
			</text>
			<view></view>
		</view>
		<!-- 图片 -->
		<view class="imegs">
			<image class="imegs1"
				src="http://img30.360buyimg.com/sku/jfs/t1/207916/19/9872/395110/6195d291Edd9f6cb0/1f78ea3df0ec8160.jpg"
				mode=""></image>
			<image class="imegs2"
				src="http://img30.360buyimg.com/sku/jfs/t1/221406/6/3106/127585/6195d28fEa18ba20a/27d9bc4d84427f45.jpg"
				mode=""></image>
			<image class="imegs3"
				src="http://img30.360buyimg.com/sku/jfs/t1/209121/25/10958/665514/61a7084fE1de8b1d3/f6a3e702814390e9.png"
				mode=""></image>
			<image class="imegs4"
				src="http://img30.360buyimg.com/sku/jfs/t1/137417/17/23611/253185/6195d291E2cb0ad0b/0a34096c04a9a83d.jpg"
				mode=""></image>
			<image class="imegs5"
				src="http://img30.360buyimg.com/sku/jfs/t1/199507/30/18151/215097/61a7084fE7cadc161/b0a7fd0d9a171415.png"
				mode=""></image>
			<image class="imegs6"
				src="http://img30.360buyimg.com/sku/jfs/t1/210828/34/9617/363360/6195d291E24339364/c2096f1254d7ca3e.jpg"
				mode=""></image>
			<image class="imegs7"
				src="http://img30.360buyimg.com/sku/jfs/t1/221743/10/3035/306910/6195d291Ef7d5eb22/78b3e5e590923d8f.jpg"
				mode=""></image>
			<image class="imegs8"
				src="http://img30.360buyimg.com/sku/jfs/t1/210925/12/11219/903661/61a70aa2Eb05a0cd5/2f49a06adf1760e7.png"
				mode=""></image>
			<image class="imegs9"
				src="http://img30.360buyimg.com/sku/jfs/t1/197510/21/17700/223157/6195d291E06e2c46a/3d25dd88ae73191a.jpg"
				mode=""></image>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<button class="button" type="primary">立即购买</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	// 轮播图样式
	.lunbo {
		margin: auto;

		swiper {
			// 注意单位：750rpx是占据一个整屏，类似于rem是一个相对单位
			// 注意UI：一般建议搞图在375px的2倍图   这样直接可以将图直接转成rpx沾满整屏
			width: 750rpx;
			height: 750rpx;

			image {
				width: 750rpx;
				height: 750rpx;
			}
		}
	}

	// 价格/文字
	.RMB_text_text {
		font-size: 38rpx;
		color: #E64340;
		margin-left: 50rpx;
		margin-top: 20rpx;
	}

	.text_span {
		margin-top: 40rpx;

		text {
			font-size: 28px;
			margin-left: 10rpx;
		}

	}


	/* 商品列表  */
	.texts {
		margin: 48rpx 0 28rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			color: #909399;
			font-weight: 500;
			font-size: 14rpx;
			padding: 0 24rpx;
		}

		view {
			width: 320rpx;
			height: 1rpx;
			border-radius: 3rpx;

			&:first-of-type {
				// background: linear-gradient(90deg, rgba(98, 98, 98, 0) 0%, #333333 100%);
				background: rgb(197, 197, 197);
			}

			&:last-of-type {
				background: rgb(197, 197, 197);
			}
		}

		text {
			position: relative;

			text {
				position: absolute;
				top: -10rpx;
				left: -30rpx;
				width: 15rpx;
				height: 50rpx;
				box-sizing: border-box;
			}
		}
	}

	// 图片
	.imegs {
		.imegs1 {
			width: 750rpx;
			height: 1302rpx;
		}

		.imegs2 {
			width: 750rpx;
			height: 700rpx;
			margin-top: -5rpx;
		}

		.imegs3 {
			width: 750rpx;
			height: 1062rpx;
			margin-top: -5rpx;
		}

		.imegs4 {
			width: 750rpx;
			height: 1007rpx;
			margin-top: -5rpx;
		}

		.imegs5 {
			width: 750rpx;
			height: 602rpx;
			margin-top: -5rpx;
		}

		.imegs6 {
			width: 750rpx;
			height: 958rpx;
			margin-top: -5rpx;
		}

		.imegs7 {
			width: 750rpx;
			height: 826rpx;
			margin-top: -5rpx;
		}
		.imegs8 {
			width: 750rpx;
			height: 752rpx;
			margin-top: -5rpx;
		}
		.imegs9 {
			width: 750rpx;
			height: 756rpx;
			margin-top: -5rpx;
		}
	}
	
	.big{
		position: relative;
		.footer{
			position: fixed;
			width: 750rpx;
			height: 104rpx;
			background-color: #2979FF;
			z-index: 11;
		bottom: 0;
			left: 0;
		}
	}
</style>
